<template>
  <flex-row class="energy-row">
    <div class="circle"></div>
    <div class="item">
      <div class="value">
        <span style="font-size: 20px;">{{ value[0] === '' ? '-' : value[0] }}</span>
        <span>kWh</span>
      </div>
      <div class="label">{{ label[0] === '' ? '-' : label[0] }}</div>
    </div>
    <div class="item">
      <div class="value">
        <span style="font-size: 20px;">{{ value[1] === '' ? '-' : value[1] }}</span>
        <span>kWh</span>
      </div>
      <div class="label">{{ label[1] === '' ? '-' : label[1] }}</div>
    </div>
    <el-image v-if="icon" :src="icon"></el-image>
  </flex-row>
</template>

<script>
import FlexRow from "@/components/base/FlexRow";
export default {
  components: {
    FlexRow
  },
  props: {
    value: {
      type: Array,
      required: true
    },
    label: {
      type: Array,
      required: true
    }
  },
  computed: {
    icon() {
      const [v1, v2] = this.value;
      if (!v1 || !v2) {
        return "";
      }
      if (!v2) {
        return require("../../../assets/icon/形状 258 副本@2x.png");
      }
      if (!v1) {
        return "";
      }
      if (parseFloat(v1) > parseFloat(v2)) {
        return require("../../../assets/icon/形状 258 副本@2x.png");
      } else {
        return require("../../../assets/icon/形状 258 副本 2@2x.png");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.energy-row {
  padding: 6px 20px;
}
.circle {
  width: 8px;
  height: 8px;
  background: rgba(221, 234, 244, 1);
  border-radius: 4px;
  margin-right: 14px;
}
.item {
  flex: 1;
  text-align: center;
}
</style>
